<template>
	<view>
		
		<!-- logo -->
		<RxLogo></RxLogo>
		
		<!-- 授权按钮 -->
		<view class="button_logo">
			<uv-button type="success" size="large" text="医 生 登 录" @click="ToLogin(1)"></uv-button>
		</view>
		<view class="button_login">
			<uv-button type="success" size="large" text="护 士 登 录" @click="ToLogin(0)"></uv-button>
		</view>
		<view class="button_login">
			<uv-button type="success" size="large" text="患 者 登 录" @click="ToLogin(2)"></uv-button>
		</view>
		<view class="button_login">
			<uv-button type="success" size="large" text="复 诊 电 手 登 录" @click="ToLogin(3)"></uv-button>
		</view>
		
		<view class="text_shuoming">
			<uv-text type="info" align="center" prefixIcon="order" iconStyle="font-size: 19px" text="首次使用说明" @click="ClickInstructions"></uv-text>
		</view>
		
		<!-- 弹窗授权 -->
		<RxPopup ref="RxOpenClick"></RxPopup>
		
	</view>
</template>

<script>
	import RxLogo from '@/components/RxLogo/RxLogo.vue'
	import RxPopup from './RxPopup/RxPopup.vue'
	export default {
		components: {
			RxLogo, RxPopup
		},
		data() {
			return {
				
			}
		},
		methods: {
			ClickInstructions() {
				uni.navigateTo({
				  url: '/pages/login/instructions'
				});
			},
			ToLogin(types) {
				// 保存用户类型到vuex(其实也就是缓存),获取数据的方式 this.$store.state.userinfo
				this.$store.dispatch('set_userinfo', { types: types })
				this.$refs.RxOpenClick.RxOpen()	// 弹窗，授权后在RxPopup组件中完成页面跳转
				
			}
		}
	}
</script>

<style>
	.button_logo {
		width: 50%;
		margin-left: auto; /* 左侧外边距自动调整为最大值 */
		margin-right: auto;/* 右侧外边距自动调整为最大值 */
		margin-top: 20%;
	}
	
	.button_login {
		width: 50%;
		margin-left: auto; /* 左侧外边距自动调整为最大值 */
		margin-right: auto;/* 右侧外边距自动调整为最大值 */
		margin-top: 20px;
	}
	
	.text_shuoming {
		position: fixed; /* 或者使用 position: absolute; 根据你的布局需要 */  
		bottom: 0; /* 使其固定在底部 */  
		left: 50%; /* 水平居中，需要配合 transform 使用 */  
		transform: translateX(-50%); /* 水平居中 */
		margin-bottom: 30px;
	}

</style>
